<template>
	<view class="concent">
		<view class="body">
			<!-- 选择约拍按钮 -->
			<view class="btn">
				<view class="block" v-if="query.type == '本片约拍'">
					<u-button type="error" text="本片约拍"></u-button>
				</view>
				<view class="btn" v-else>
					<view class="block">
						<u-button type="error" text="本片约拍"></u-button>
					</view>
					<view class="block">
						<u-button type="primary" text="自主约拍" @click="goAutonomously"></u-button>
					</view>
				</view>
			</view>

			<!-- 预约的类型 -->
			<view class="contractType">
				<text class="title">您的预拍摄类型：{{shootingType}}</text>
				<scroll-view scroll-x class="scroll">
					<view class="item">
						<image class="img" src="../../static/摆台定制.jpg" mode="aspectFit"></image>
					</view>
					<view class="item">
						<image class="img" src="../../static/摆台定制.jpg" mode="aspectFit"></image>
					</view>
					<view class="item">
						<image class="img" src="../../static/摆台定制.jpg" mode="aspectFit"></image>
					</view>
					<view class="item">
						<image class="img" src="../../static/摆台定制.jpg" mode="aspectFit"></image>
					</view>
					<view class="item">
						<image class="img" src="../../static/摆台定制.jpg" mode="aspectFit"></image>
					</view>
					<view class="item">
						<image class="img" src="../../static/摆台定制.jpg" mode="aspectFit"></image>
					</view>
				</scroll-view>
			</view>
			<!-- 用户信息 -->
			<view class="info">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="姓   名:" prop="name" borderBottom ref="item1">
						<u--input clearable placeholder="请输入姓名" border="surround" v-model="userInfo.name"></u--input>
					</u-form-item>
					<u-form-item label="电   话:" prop="phone" borderBottom ref="item1">
						<u--input clearable placeholder="请输入号码" type="number" border="surround"
							v-model="userInfo.phone"></u--input>
					</u-form-item>
					<u-form-item label="备   注:" prop="remarks" borderBottom ref="item1">
						<u--textarea v-model="userInfo.remarks" placeholder="请输入备注" autoHeight></u--textarea>
					</u-form-item>
				</u--form>
			</view>
			<!-- 支付方式 -->
			<view class="payType">
				<view class="title">支付方式</view>
				<u-radio-group v-model="radiovalue1" placement="column" iconPlacement="right">
					<u-radio :customStyle="{marginTop: '8px',marginBottom: '8px',padding:'8px'}" label="余额支付"
						name="余额支付">
						<view class="">
							<uni-icons type="wallet" size="20"></uni-icons>
							<text>余额支付</text>
						</view>
					</u-radio>
					<u-radio :customStyle="{
						marginBottom: '8px',
						padding: '8px'
					}" label="支付宝支付" name="支付宝支付">
						<view class="">
							<uni-icons type="wallet" size="20"></uni-icons>
							<text>支付宝支付</text>
						</view>
					</u-radio>
					<u-radio :customStyle="{
						marginBottom: '8px',
						padding: '8px'
					}" label="微信支付" name="微信支付">
						<view class="">
							<uni-icons type="wallet" size="20"></uni-icons>
							<text>微信支付</text>
						</view>
					</u-radio>
				</u-radio-group>
			</view>

			<!-- 联系和拍摄时间 -->
			<view class="block">
				<view class="contact">
					<view class="left">
						<u--image src="/static/聊一聊.png" width="160rpx" height="70rpx" mode="aspectFit"></u--image>
					</view>
					<view class="right">
						<text>有问题请咨询我摄影师</text>
						<u--image src="/static/logo.png" shape="circle" width="80rpx" height="80rpx" mode="aspectFit"
							@click="showCard"></u--image>
					</view>
				</view>
				<view class="shootingTime">
					<view class="left">
						<u--image src="/static/拍摄时间.png" width="160rpx" height="70rpx" mode="aspectFit"></u--image>
					</view>
					<view class="right">
						<text @click="showCalendar=true" v-if="shootingTime===''">点击滑动选择拍摄时间</text>
						<text @click="showCalendar=true" v-else>{{shootingTime}}</text>
					</view>
				</view>
			</view>
			<!-- 预约日历 -->
			<c-calendar 
				:formatter="formatter" 
				:show="showCalendar" 
				@confirm="confirm" 
				@close="close" 
				ref="calendar" />
			<!-- 预约详情 -->
			<u-popup :show="modelDetails.show" mode="top">
				<view class="popu">
					<view class="title">{{ modelDetails.date }}</view>
					<view class="content">
						<view class="row" v-for="(item, index) in modelDetails.info" :key="index">
							<view class="item">
								<u--text :type="item ? 'error' : 'success'" :text="!index ? '早' : (index === 1 ? '中' : '晚')" />
							</view>
							<view class="item" v-if="item">
								<u-tag type="error" text="已满" />
							</view>
							<view class="item">
								<u-tag type="success" @click="change(item, index)" text="预约" />
							</view>
						</view>
					</view>
					<u-button type="warning" @click="modelDetails.show = false" text="取消"></u-button>
				</view>
			</u-popup>
			<!-- 预约已满，用户强制预约 -->
			<u-modal
				content="此时段摄影师已安排拍摄任务，若预约此时段订单大概率被摄影师拒绝，请谨慎预约。"
				:show="checkChange"
				showCancelButton
				@confirm="change"
				@cancel="() => checkChange = false"
			></u-modal>
			<!-- 弹窗联系卡 -->
			<template>
				<u-popup closeable @close="closeCard()" :show="cardState" mode="bottom">
					<view class="dialogCard">
						<view class="photoText">电 话：12345678910</view>
						<view class="wxText">
							<text>微 信：</text>
							<u--image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" width="80px" height="80px"
								shape="square"></u--image>
						</view>
						<u-button text="平台消息联系" type="primary" @click="contactShop(1)"></u-button>
					</view>
				</u-popup>
			</template>

			<view>
				<view class="page-section page-section-gap">
					<map id="myMap" style="width: 100%; height: 280px;" :latitude="latitude" :longitude="longitude"
						:markers="markers" @poitap="poitap" show-location></map>
				</view>
			</view>
			<view style=" display: flex;justify-content: space-between; padding-bottom: 100rpx;">
				<view class="distance" style="">
					<text>摄影师目前距您XXX米</text>
				</view>
				<view style="padding-left: 15px;"></view>
				<view class="distance" style="width: 30%;text-align: center;">
					取消订单
				</view>
			</view>
		</view>
		<!-- 总金额和支付 -->
		<view class="footer">
			<view class="total">
				<text>待支付￥ 888</text>
			</view>
			<view class="btnPay u-demo-block__content">
				<u-button text="支付" size="large" color="#000000"></u-button>
			</view>
		</view>
	</view>

</template>

<script>
	var self, mapCtx
	export default {
		onLoad(query) {
			self = this
			// 获取当前map
			mapCtx = wx.createMapContext('myMap')
			self.getAuthorizeInfo()
			this.query = query
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		//相关配置参数
		data() {
			return {
				query: {},
				// 初始化的中心位置
				latitude: 23.099994,
				longitude: 113.32452,
				// 标记点
				markers: [{
					id: 1,
					latitude: 23.099994,
					longitude: 113.32452,
					name: 'T.I.T 创意园'
				}],
				// 预拍摄类型
				shootingType: '富贵古代千金园林风',
				// 用户信息
				userInfo: {
					name: '',
					phone: '',
					remarks: ''
				},
				// 表单验证规则
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'number',
						max: 11,
						required: true,
						message: '请输入正确的手机号',
						trigger: ['blur', 'change']
					}
				},
				cardState: false,
				// 日历卡片显示
				showCalendar: false,
				// 拍摄时间
				shootingTime: '',
				modelDetails: {
					show: false,
					// 记录早中晚的预约情况
					info: [],
					date: "",
					// 用于预约已满时，提醒用户是否确认时存储数据使用
					change: ""
				},
				checkChange: false
			}
		},
		methods: {
			isShow() {
				const pages = getCurrentPages()
				const prePage = pages[pages.length - 2]
				if (prePage.route === 'pages/shopping_crad/shopping_crad') {
					return false
				}
				return true
			},
			showCard() {
				this.cardState = true
			},
			closeCard() {
				this.cardState = false
			},
			// 平台联系商家
			contactShop(id) {
				uni.navigateTo({
					url: `/pages/message/messageroom/messageroom?id=${id}`
				})
			},
			// 位置授权
			getAuthorizeInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						// 允许授权
						self.getLocationInfo()
					},
					fail() {
						// 拒绝授权
						self.openConfirm()
						console.log('你拒绝了授权，无法获得周边信息')
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res, '当前位置')
						// 移动到当前位置
						self.toLocation(res)
						self.latitude = res.latitude
						self.longitude = res.longitude
					}
				})
			},
			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: res => {
						if (res.confirm) {
							uni.openSetting() // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				})
			},
			toLocation: function(obj) {
				// 改变地图中心位置
				mapCtx.moveToLocation(obj)
				// 移动标记点并添加动画效果
				mapCtx.translateMarker({
					markerId: 1,
					autoRotate: true,
					duration: 100,
					destination: {
						latitude: obj.latitude,
						longitude: obj.longitude
					},
					animationEnd() {
						console.log('animation end')
					}
				})
			},
			//
			poitap: function(e) {
				console.log(e, 'poitap')
				var obj = e.detail
				self.toLocation(obj)
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if ((day.month === month && day.day >= date) || day.month > month) {
					/* 规则：查看源码 {@link /components/c-calendar/month.vue line 21}*/
					day.zao = Math.round(Math.random())
					day.zhong = Math.round(Math.random())
					day.wan = Math.round(Math.random())
				}
				return day
			},
			// 打印日期
			confirm(date, dayInfo) {
				this.modelDetails.info = [
					dayInfo.zao, dayInfo.zhong, dayInfo.wan
				]
				this.modelDetails.date = date
				this.modelDetails.show = true
			},
			// 关闭日期卡
			close() {
				this.showCalendar = false
			},
			change(item, index) {
				// 预约按钮
				if (item !== undefined && index !== undefined) {
					let period = !index ? '早' : (index === 1 ? '中' : '晚');
					this.modelDetails.change = this.modelDetails.date + ":" + period;
					// 预约满
					if (item) {
						this.checkChange = true;
					} else {
						this.shootingTime = this.modelDetails.change;
						this.modelDetails.show = false;
						this.showCalendar = false;
					}
				} 
				// 预约已满，用户确认是否强制预约
				else {
					this.shootingTime = this.modelDetails.change;
					this.checkChange = false;
					this.modelDetails.show = false;
					this.showCalendar = false;
				}
			},
			// 前往自主约拍页面
			goAutonomously() {
				uni.navigateTo({
					url: '/pages/map/AutonomouslyOrders'
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx;
		z-index: 1;
		box-sizing: border-box;

		.btn {
			display: flex;
			justify-content: space-evenly;
			background-color: $uni-bg-color;
			padding: 20rpx;
			border-radius: 10rpx;

			.block {
				width: 300rpx;
			}
		}

		.contractType {
			margin: 20rpx 0;
			background-color: $uni-bg-color;
			border-radius: 10rpx;

			.title {
				padding: 10rpx 20rpx;
				font-size: $uni-font-size-sm;
				font-weight: 900;
			}

			.scroll {
				white-space: nowrap;
				margin: 20rpx 0rpx;
				padding-left: 20rpx;

				.item {
					width: 200rpx;
					height: 240rpx;
					display: inline-block;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 30%;
					}
				}
			}
		}

		.info {
			background-color: $uni-bg-color;
			padding: 20rpx 20rpx;
			border-radius: 10rpx;
		}

		.payType {
			background-color: $uni-bg-color;
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			margin-top: 20rpx;
			font-size: $uni-font-size-lg;

			.title {
				font-weight: 900;
				padding: 20rpx;
				border-bottom: solid 1px #f5f5f5;
			}
		}

		.block {
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			background-color: $uni-bg-color;
			border-radius: 10rpx;

			.contact {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #8c8c8c;

				.right {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
				}
			}

			.shootingTime {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right {
					color: #8c8c8c;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: $uni-bg-color;
		z-index: 2;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.total {
			padding-left: 20rpx;
			font-size: $uni-font-size-base;
			color: #000;
			font-weight: 900;
		}

		.btnPay {
			width: 200rpx;
			flex-direction: column;
			align-items: stretch;
			flex-wrap: nowrap;
		}
	}

	.dialogCard {
		height: 500rpx;
		width: 720rpx;
		padding: 50rpx;
		box-sizing: border-box;

		.photoText {
			font-size: $uni-font-size-lg;
			margin: 20rpx 0;
		}

		.wxText {
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: $uni-font-size-lg;
			margin: 20rpx 0;
			margin-bottom: 50rpx;
		}
	}

	// .secend {
	// 	background-color: white;
	// 	width: 95%;
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;
	// 	align-content: center;
	// 	margin-bottom: 10px;
	// 	border-radius: 8px;
	// }

	.distance {
		border-style: solid;
		width: 55%;
		padding: 10px;
		justify-content: space-between;
	}

	// .photo {
	// 	min-width: 140px;
	// 	max-width: 140px;
	// 	max-height: 140px;
	// 	min-height: 140px;
	// 	border-radius: 70px;
	// 	background: #aaffff;
	// 	line-height: 65px;
	// }

	// .page-section-gap {
	// 	box-sizing: border-box;
	// 	padding: 0 20rpx;
	// }

	// .page-body-button {
	// 	margin-bottom: 30rpx;
	// }
	
	.popu {
		font-size: 18px; 
		padding: 30px;
		
		.title {
			margin-left: 20px;
		}
		
		.content {
			padding: 5px 45px;
			
			.row {
				display: flex;
				justify-content: flex-start;
				margin: 5px;
				
				.item {
					margin-right: 10px;
					line-height: 28px;
				}
			}
		}
	}
</style>